<template>
  <a-row type='flex' justify='center' align='stretch'>
    <a-col :xl='12' :lg='12' :sm='0' :xs='0'>
      <a-card :bordered='false'>
        <img
          slot='cover'
          alt='bg'
          :src="require('@/assets/login/left-bg.png')"
        />
      </a-card>
    </a-col>
    <a-col :xl='12' :lg='12' :sm='24' :xs='24' style='background: #fff'>
      <a-row type='flex' justify='center' align='middle' style='height: 100%'>
        <a-col :span='24'>
          <a-card :bordered='false' :body-style='{padding:"50px"}'>
            <h1>{{ config.site_name }}</h1>
            <a-form-model
              ref='form'
              :model='model'
              :rules='rules'
              layout='vertical'
            >

              <a-form-model-item label='账户' prop='username'>
                <a-input
                  size='large'
                  type='text'
                  placeholder='请输入用户名'
                  v-model='model.username'
                >
                  <a-icon slot='prefix' type='user' />
                </a-input>
              </a-form-model-item>

              <a-form-model-item label='密码' prop='password'>
                <a-input-password
                  size='large'
                  placeholder='请输入密码'
                  v-model='model.password'
                  @keyup.enter='handleSubmit'
                >
                  <a-icon slot='prefix' type='lock' />
                </a-input-password>
              </a-form-model-item>

              <a-form-item>
                <a-button
                  size='large'
                  type='primary'
                  block
                  :loading='state.loginBtn'
                  :disabled='state.loginBtn'
                  @click='handleSubmit'
                >登录
                </a-button>
              </a-form-item>

            </a-form-model>
          </a-card>
        </a-col>
      </a-row>
    </a-col>
  </a-row>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { timeFix } from '@/utils/util'
import store from '@/store'

export default {
  components: {},
  computed: {
    ...mapGetters([
      'config',
    ]),
  },
  data() {
    return {
      loginBtn: false,
      model: {
        username: '',
        password: ''
      },

      state: {
        loginBtn: false
      },

      rules: {
        username: [
          { required: true, message: '请输入账号' },
          { min: 2, max: 50, message: '账号2-50个字符' }
        ],
        password: [
          { required: true, message: '请输入密码' }
        ]
      }
    }
  },
  created() {

  },
  methods: {
    ...mapActions(['Login', 'Logout']),
    handleSubmit() {
      console.log(1)
      this.$refs.form.validate(valid => {
        if (valid) {

          this.state.loginBtn = true

          this.$api.passport('', this.model, 'POST').then(res => {
            this.loginSuccess(res)
          }).finally(() => {
            this.state.loginBtn = false
          })
        } else {
          return false
        }
      })
    },
    loginSuccess(res) {
      store.dispatch('Login', res)

      this.$router.push({ path: '/' })

      // 延迟 1 秒显示欢迎信息
      setTimeout(() => {
        this.$notification.success({
          message: '欢迎',
          description: `${timeFix()}，欢迎回来`
        })
      }, 1000)
    }
  }
}
</script>

<style lang='less' scoped>
</style>
